<template>
  <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown" :duration="400">
  <div class="page-baldtl">
    <myHeader head-title="余额明细" go-back='true'></myHeader>
    <section class="baldtl_container">
      <ul class="baldtl_list_ul">
        <li class="baldtl_list_li" v-for="item in acctDtls" :key="item.id">
          <section class="list_item">
            <div class="list_item_left">
              <span>业务代码:{{item.acctBizCd}}</span>
              <p>{{item.dtTr}} {{item.tmTr}}</p>
            </div>
            <div class="list_item_right">
              <p>{{(item.amtAcct/100).toFixed(2)}}</p>
            </div>
          </section>
        </li>
      </ul>
    </section>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
  </div>
  </transition>
</template>

<script>
  import {mapGetters} from 'vuex'
  import myHeader from '@/components/common/header/header'
  import alertTip from '@/components/common/alertTip'
  export default {
    data() {
      return {
        showAlert: false,      //显示提示组件
        alertText: null        //提示的内容
      }
    },
    components: {
      myHeader,
      alertTip
    },
    computed: {
      ...mapGetters([
        'acctDtls'
      ])
    },
    mounted() {
      this.$store.dispatch('getAcctDtls', {"custId": "13918831371", "acctTpBiz": "C010"});
    },
    methods: {
      closeTip() {
      this.showAlert = false;
      }
    },
    watch: {
      acctDtls: {
        handler: function (val, oldVal) {

        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import 'src/style/mixin';

  .page-baldtl {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p, span {
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .baldtl_container {
    padding: 0 .7rem;
    .hongbao_title{
        @include fj;
        font-size: .5rem;
        line-height: 2rem;
        .total_number{
            color: #666;
            span{
                color: #ff5340;
            }
        }
    }
    .baldtl_list_ul {
      .baldtl_list_li {
        background-size: .5rem .2rem;
        margin-bottom: 0.5rem;
        border-radius: 0.25rem;
        .list_item{
            @include fj;
            padding: 1rem 0.5rem .8rem;
            .list_item_left{
                font-size: 0;
                border-right: 0.025rem dotted #ccc;
                flex: 1;
                span:nth-of-type(1){
                    @include sc(.6rem, #000);
                    font-weight: bold;
                }
                span:nth-of-type(2){
                    @include sc(1.5rem, #ff5340);
                }
                span:nth-of-type(3), span:nth-of-type(4){
                    @include sc(0.8rem, #ff5340);
                    font-weight: bold;
                }
                p{
                    @include sc(0.4rem, #999);
                }
            }
            .list_item_right{
                flex: 0.5;
                margin-left: 1.5rem;
                h4{
                    @include sc(.7rem, #666);
                    margin-left: -.7rem;
                }
                p {
                    list-style-type: disc;
                    margin-left: -.7rem;
                    @include sc(.6rem, #000);   
                }
            }
            .time_left{
                @include sc(.75rem, #ff5340);
            }
        }
        .list_item_footer{
            background-color: #f9f9f9;
            padding: .4rem .4rem;
            border-bottom-left-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
            p{
                list-style-type: disc;
                @include sc(.4rem, #999);
                margin-left: .4rem;
            }
        }
      }
    }
  }
</style>
